﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当当图书榜</title>
    <style>
    *{
    margin:0;
    padding:0;
}
li{
    list-style:none;
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
img{
    vertical-align: middle;
}
.fr{
    float:right;
}
.fl{
    float:left;
}
.clearfix:after{
    display:table;
    content:"";
    clear:both;
}
body{
    font-size:12px;
    font-family:"Verdana","宋体";
}
.all{
    width:990px;
    margin:10px auto;
    box-sizing: border-box;
}
.top{
    height:48px;
    width:990px;
    position: relative;
}
.top .top_nav ul{
    position: absolute;
    right:0;
    bottom:0;
    background: #eafffa;
    border:1px solid #d1efe8;
    border-bottom:none;
    padding-right:10px;
}
.top .top_nav li{
    float:left;
    height:28px;
    line-height:28px;
    text-align: center;
    margin-left:10px;
}
.top .top_nav li:first-of-type{
    position: absolute;
    top:-18px;
    left:3px;
}
.nav{
    height:30px;
    line-height:30px;
    background: #fe6915;
    margin:5px 0 10px 0;
}
.nav li{
    float:left;
    margin:0 17px;
}
.nav li a{
    color:#fff;
}
.banner{
    margin-bottom:15px;
}
.banner img{
    width:100%;
}
.main{
    border:1px solid #94c960;
    padding:15px;
}
.main .main_title{
    position:relative;
    display:block;
    margin-bottom:20px;
    top:0;
    left:-27px;
}
.main .book1{
    padding-right:15px;
    position:relative;
    width:540px;
    box-sizing: border-box;
}
.main .book_num{
    position:absolute;
    top:-10px;
    left:20px;
}
.main .book_title{
    font-size:14px;
}
.main p{
    margin-bottom:8px;
    line-height:18px;
}
.main .book_price{
    color:red;
    font-weight:700;
}
.main .book_discoun{
    color:#63a595;
}
.main .book2{
    width:415px;
    position:relative;
    margin-bottom:10px;
}
.main .book_num2{
    position:absolute;
    top:-10px;
    left:0;
}
.foot{
    text-align:center;
    color:#ccc;
    margin-top:10px;
}
</style>
</head>
<body>
<div class="all">
    <div class="top clearfix">
        <div class="logo fl">
            <a href="#"><img src="image/logo.jpg" /></a>
        </div>
        <div class="top_nav fr">
            <ul>
                <li><img src="image/icon_count.png" /></li>
                <li><a href="#">尾品汇</a></li>
                <li><a href="#">当当优品</a></li>
                <li><a href="#">数字馆</a></li>
                <li><a href="#">都看阅器</a></li>
            </ul>
        </div>
    </div>
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">图书</a></li>
            <li><a href="#">音像</a></li>
            <li><a href="#">童装</a></li>
            <li><a href="#">服装</a></li>
            <li><a href="#">鞋靴</a></li>
            <li><a href="#">运动</a></li>
            <li><a href="#">箱包</a></li>
            <li><a href="#">美妆</a></li>
            <li><a href="#">珠宝</a></li>
            <li><a href="#">家居</a></li>
            <li><a href="#">食品</a></li>
            <li><a href="#">酒</a></li>
            <li><a href="#">手机</a></li>
            <li><a href="#">数码</a></li>
            <li><a href="#">电脑</a></li>
            <li><a href="#">家电</a></li>
        </ul>
    </div>
    <div class="banner">
        <a href="#"><img src="image/banner.png" /></a>
    </div>
    <div class="main clearfix">
        <div>
            <img class="main_title" src="image/bg_bang.gif"/>
        </div>
        <div class="book1 fl">
            <img src="image/bookNo1.gif" class="book_num" />
            <ul>
                <li class="fl"><a href="#"><img src="image/book-01.jpg" /></a></li>
                <li><p class="book_title"><a href="#">偷影子的人</a></p>
                    <p>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译</p>

                    <p>出版社：湖南文艺出版社</p>

                    <p>当当价：<span class="book_price">￥ 17.90</span></p>

                    <p>不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的
                    回忆，一个时间之神没有应允的愿望。 一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强
                    大：他能“偷别人的影子”，因而能看见他</p>
                </li>
            </ul>
        </div>
        <div class="book2 fl">
            <img src="image/bookNo2.gif"  class="book_num2"/>
            <ul>
                <li class="fl"><a href="#"><img src="image/book-02.jpg" /></a></li>
                <li><p class="book_title"><a href="#">看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘)</a></p>
                    <p>作 者：柴静 著</p>

                    <p>出版社：广西师范大学出版社</p>

                    <p><span class="book_price">￥ 29.40</span> <span class="book_discoun">7.4折</span></p></li>
            </ul>
        </div>
        <div class="book2 fl">
            <img src="image/bookNo3.gif"  class="book_num2"/>
            <ul>
                <li class="fl"><a href="#"><img src="image/book-03.jpg" /></a></li>
                <li><p class="book_title"><a href="#">改变孩子先改变自己</a></p>
                    <p>作 者：贾容韬 贾毅 著</p>

                    <p>出版社：作家出版社</p>

                    <p><span class="book_price">￥ 22.20</span> <span class="book_discoun">7.4折</span></p></li>
            </ul>
        </div>
    </div>
    <div class="foot">
        <p>Copyright (C) 当当网 2004-2017, All Rights Reserved<img src="image/validate.gif" />京ICP证041189号出版物经营许可证 新出发京批字第直0673号</p>
    </div>
</div>
</body>
</html>